<template>
  <div class="seckill">
    <div class="seckill_head">
      <span>嗨购秒杀</span><i>24</i>
      <span class="dianchang"></span>
      <!-- 倒计时组件 -->
      <van-count-down :time="time">
        <template #default="timeData">
          <span class="block">{{ timeData.hours }}</span>
          <span class="colon">:</span>
          <span class="block">{{ timeData.minutes }}</span>
          <span class="colon">:</span>
          <span class="block">{{ timeData.seconds }}</span>
        </template>
      </van-count-down>
      <a href="javascript:;" class="hot"> 爆款轮番秒</a>
    </div>
    <!-- 列表 -->
    <ul class="seckill_main">
      <li v-for="item in secKillList" :key="item.proid" @click="jumpTo(item.proid)">
        <img :src="item.img1" alt="" />
        <p>￥{{ item.originprice }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import { getsecKillList } from "../../apis/home";
import Vue from "vue";
import { CountDown } from "vant";

Vue.use(CountDown);
export default {
  name: "Secskill",

  data() {
    return {
      time: 24 * 60 * 60 * 1000,
      secKillList: [],
    };
  },

  mounted() {},

  methods: {
    jumpTo(proid){
      this.$router.push("/pro/detail/"+proid)
    }
  },
  created() {
    getsecKillList({limitNum: 9}).then((data) => {
      this.secKillList = data.data.data;
    }); 
  },
};
</script>

<style  scoped>
.seckill {
  margin-top: 0.1rem;
  background-color: #fff;
  border-radius: 0.1rem;
  padding: 0.1rem;
  width: 100%;
}
.seckill_head {
  background: url();
  background-size: contain;
  /* position: absolute; */
}
i {
  color: #ee0a24;
  margin-left: 0.2rem;
  display: inline-block;
}
.dianchang {
  background: url(https://wq.360buyimg.com/jdm-home-page/pages/images/seckill-time-to_1de70c91.png)
    no-repeat;
  color: #ee0a24;
  width: 0.2rem;
  height: 0.23rem;
  display: inline-block;
  background-size: contain;
  line-height: 0.23rem;
  position: relative;
  top: 0.08rem;
  /* margin-top:-0.2rem; */
}
.van-count-down {
  display: inline-block;
  margin-left: 0.1rem;
}
.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}
.block {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #ee0a24;
}
.hot {
  color: #ee0a24;
  font-size: 0.14rem;
  display: block;
  float: right;
  line-height: 0.3rem;
}
.seckill_main {
  margin-top: 0.1rem;
  display: flex;
  overflow-x: auto;
  width: 100%;
}
.seckill_main::-webkit-scrollbar {
  display: none;
}
.seckill_main li {
  width: 25%;
  margin-right: 0.1rem;
  text-align: center;
}
.seckill_main li img {
  width: 0.6rem;
  height: 0.6rem;
}
.seckill_main li p {
  color: #ee0a24;
}
</style>